<template>
  <div style="background-color: rgb(231, 229, 229);padding-bottom:10px">
    <!-- 搜索 -->
    <form action="/">
      <van-search
        v-model="val"
        show-action
        placeholder="请输入搜索关键词"
        @search="sou"
      />
    </form>
    <!-- 筛选 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="yy" :options="option1" />
      <van-dropdown-item v-model="dd" :options="option2" />
    </van-dropdown-menu>
      <div class="ka">
        <ul>
          <li v-for="(item,i) in goods" :key="i">
            <router-link :to="`/product_details?id=${item.productid}`">
              <div class="goodsBox">
                <div class="goodsImg">
                  <img width="100%" :src="'http://127.0.0.1:3000'+`${item.productphoto}`" alt="">
                </div>
                <div class="goodsTitle">
                  <span>{{item.productdesc}}</span>
                </div>
                <div class="goodsprice">
                  <span class="s1">¥</span>
                  <span class="s2">{{item.productprice}}</span>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    <!-- 底部Tabbar -->
    <mt-tabbar
      v-model="tabbars"
      fixed
      style="color: #bfbfbf; border-top: 1px solid #bfbfbf"
    >
      <mt-tab-item id="首页" style="background-color: #fff">
        <img slot="icon" src="../assets/首页.svg" />
        <strong>首页</strong>
      </mt-tab-item>
      <mt-tab-item id="周边" style="background-color: #fff">
        <img slot="icon" src="../assets/商城(1).svg" />
        <strong style="color: rgb(248, 62, 62)">周边</strong>
      </mt-tab-item>
      <mt-tab-item id="购物车" style="background-color: #fff">
        <img slot="icon" src="../assets/购物车.svg" />
        <strong>购物车</strong>
      </mt-tab-item>
      <mt-tab-item id="我的" style="background-color: #fff">
        <img slot="icon" src="../assets/我的.svg" />
        <strong>我的</strong>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tabbars: "周边",
      val: "",
      yy: 0,
      dd: "a",
      count: 1,
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      goods: [],
      show: false,
    };
  },
  methods: {
    sou() {
      this.value = "";
    },
    product() {
      axios.get("/product").then((res) => {
        this.goods = res.data.results;
      });
    },
  },
  mounted() {
    this.product();
  },
  watch: {
    tabbars() {
      if (this.tabbars == "我的") {
        this.$router.push("/me");
      } else if (this.tabbars == "首页") {
        this.$router.push("/");
      } else if (this.tabbars == "购物车") {
        this.$router.push("/cart");
      }
    },
    routerlink(){
      window.scrollTo(0, 0);
    }
  },
  computed: {
    ...mapState(["car"]),
  },
};
</script>
<style  scoped>
.ka{
  margin-bottom: 60px;
}
.ka ul{
  margin: auto;
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* margin-left: 10px; */
}
.ka ul li{
  width: 48%;
  margin-top: 10px;
  /* margin-right: 10px; */
  border: 1px solid rgb(238, 237, 237);
  text-align: left;
  border-radius: 10px;
  background-color: white;
  overflow: hidden;
  padding-bottom: 10px;
}
.goodsTitle{
  width: 90%;
  margin: auto;
}
.goodsTitle span{
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap !important;
  font-size: 12px;
  color: black;
}
.goodsprice{
  margin-top: 10px;
  margin-left: 12px;
}
.goodsprice .s1{
  color: rgb(238, 40, 40);
  font-size: 14px;
}
.goodsprice .s2{
  margin-left: 2px;
  color: rgb(238, 40, 40);
  font-size: 20px;
}
</style>